<template>
    <img src="https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
    <div class="login">
        <h5>登录</h5>
        <el-input :prefix-icon="User" v-model="username" @keyup.enter='login' placeholder="请输入用户名"></el-input>
        <el-input :prefix-icon="Lock" v-model="password" @keyup.enter='login' placeholder="请输入密码" show-password type="password"></el-input>
        <div>
            <el-button @click="visible = true" size="default" type="success">注册</el-button>
            <el-button @click="login" size="default" type="primary">登录</el-button>
        </div>
    </div>
    <div class="regist">
        <el-dialog v-model="visible" title="注册" width="350px" @close="close">
            <el-input :prefix-icon="User" v-model="username1" placeholder="请输入用户名"></el-input>
            <el-input :prefix-icon="Lock" v-model="password1" placeholder="请输入密码" show-password type="password"></el-input>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="visible = false">取消</el-button>
                    <el-button type="primary" @click="regist">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import $http from '@/api';
import { message } from '@/public';
import router from '@/router';
import { User, Lock } from '@element-plus/icons-vue';
// import {useStore} from 'vuex'
import { useState } from '@/public/useStore.js'
/**
 * @Author dingxing [2023-02-28 15:20:35]
 * @Description 
 */
// console.log('store',useStore().state)
// const { icarNewsScrollY, icarNewsScrollY_m, isStylePc, disableLoading } = useState(['icarNewsScrollY','icarNewsScrollY_m','isStylePc','disableLoading'])
// console.log(icarNewsScrollY, icarNewsScrollY_m, isStylePc, disableLoading,useState)
// 定义模板变量
const username = ref('');
const password = ref('');
const username1 = ref('');
const password1 = ref('');
const visible = ref(false);
// 登录
const login = () => {
    if (!username.value) return message({ type: 'info', text: "请输入用户名" });
    $http.get('/login', {
        username: username.value,
        password: password.value
    }).then((res) => {
        message({
            type: 'success',
            text: "登录成功"
        })
        // 存用户信息
        for (let i in res) {
            localStorage.setItem(i, res[i]);
        }
        router.push('/home')
    })
};
// 提交注册
const regist = () => {
    if (!username1.value) return message({ type: 'info', text: "请输入用户名" });
    $http.get('/register', {
        username: username1.value,
        password: password1.value
    }).then(() => {
        message({
            type: 'success',
            text: "注册成功"
        });
        username.value = username1.value;
        password.value = password1.value;
        visible.value = false;
    })
};
// 注册弹框关闭事件
const close = () => {
    visible.value = false;
};
</script>

<style lang="less" scoped>
.el-input {
    margin: 0.1rem;
}
h5 {
    margin: 10px;
}
.el-button {
    margin: 0.1rem;
}
.login {
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 auto;
    position: fixed;
    top: 50%;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.5rem;

    img {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: -1;
        object-fit: cover;
    }
}

img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
</style>